<template>
  <!-- 页面顶部 -->
  <div class="top">
    <router-link to="/mainForm">
      <div class="tlCorner"></div>
    </router-link>

    <!-- 搜索框 -->
    <div class="searchBar" id="Search">
      <input type="text" id="searchInput" name="keyword" size="14" placeholder="搜索您喜欢的宠物">
      <div id="searchSubmit" @click="searchAll"></div>
      <div id="auto" @click="searchClick"></div>
    </div>

    <div class="trCorner">
      <ul>
        <li>
          <router-link to="/signon" v-if="!isLogged">用户登录</router-link>
        </li>
        <li>
          <router-link to="/register" v-if="!isLogged">注册</router-link>
        </li>
        <li>
          <router-link @click="signout" v-if="isLogged" to="/mainForm">退出</router-link>
        </li>
        <li>
          <router-link to="/cartForm">购物车</router-link>
        </li>
        <li>店铺介绍</li>
        <li>
          <router-link to="/help">帮助</router-link>
        </li>
        <li>联系我们</li>
        <router-link id="userInfo" v-if="isLogged" to="/myAccountForm"></router-link>
        <router-link id="userInfo" v-else to="/signon"></router-link>
      </ul>
    </div>
  </div>
</template>

<script>

import $ from "jquery";
import axios from "axios";

export default {
  name: "PageTop",

  data() {
    //将属性数据限制在仅组件内可用
    return {
      //用户是否登录系统
      isLogged: localStorage.getItem('username') !== null,
      searchList: ''
    }
  },
  mounted() {
    //搜索
    $("#searchInput").keyup(() => {
      this.search()
    })
  },
  methods: {
    //用户退出账号
    signout() {
      console.log('退出账号......')
      localStorage.removeItem('username')
      localStorage.removeItem('cart')
      localStorage.removeItem('account')
      console.log('username=' + localStorage.getItem('username'))
      //刷新并跳转页面至主页面
      location.href = '/mainForm'
    },

    search() {
      var keyword = $("#searchInput").val();
      if (keyword === "") {
        $("#auto").css("display", "none");
        return;
      } else {
        axios({
          url: "http://127.0.0.1:8088/catalog/search/" + keyword,
          method: 'get',
          headers: {
            'Content-Type ': 'multipart/form-data'
          }
        }).then((res) => {
          this.searchList = res.data.data
          var htm = "";
          for (var i = 0; i < this.searchList.length; i++) {
            var reg = new RegExp("(" + keyword + ")", "i");
            htm += "<div class='auto_out' id='" + this.searchList[i].productId + "'>" + this.searchList[i].name.replace(reg, "<strong>$1</strong>") + "</div>";
          }
          $("#auto").html(htm);
          $("#auto").css("display", "block");
        }).catch((err) => {
          console.log(err)
        });
      }
    },

    //搜索点击单个宠物
    searchClick(e) {
      const searchProductId = e.target.id
      $('#auto').hide()
      $('#searchInput').val('')
      this.$router.push({name: 'productForm', params: {id: searchProductId}})
    },

    //搜索点击搜索按钮
    searchAll(e) {
      $('#auto').hide()
      $('#searchInput').val('')
      this.$router.push({name: 'searchProduct', query: {searchList: JSON.stringify(this.searchList)}})
    }
  },

}


</script>

<style>
/* 页面顶部 */
.top {
  height: 100px;
  width: 100%;
  position: absolute;
  top: 25px;
}

/* 左上角logo */
.tlCorner {
  width: 160px;
  height: 500px;
  position: absolute;
  left: 24px;
  background-image: url('../assets/img/logo.png');
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 85%;
}

/* 右上角 */
.trCorner ul {
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  position: absolute;
  right: 50px;
}

.trCorner li {
  list-style: none;
  color: beige;
  font-size: 18px;
  font-family: huayuan;
  margin: 12px;
}

/* 右上角头像 */
.trCorner #userInfo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  background-color: #fff;
  position: relative;
  left: 14px;
  margin: 0 auto;
  background-image: url('../assets/img/cat_avatar_01.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center 0;
}


#inform hr {
  border: 1px;
  width: 325px;
  margin-bottom: 0px;
}

@font-face {
  font-family: 'huayuan';
  src: url('../assets/font/花园肉丸.ttf');
}

.top {
  z-index: 3;
  height: 70px;
  top: 0px;
  left: 0;
  position: fixed;
  padding-top: 20px;
  background-color: transparent;
}

/* 删除原本超链接样式 */
a {
  text-decoration: none;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}


.trCorner li {
  color: rgb(190, 158, 111);
}

/* 顶部导航颜色渐变 */
@keyframes color_turn {
  from {
    background-color: #e9e4f0bb;
    color: silver;
  }

  to {
    background-color: rgb(222, 186, 138);
    color: beige;
  }
}

.change_color {
  animation: color_turn 500ms ease 1 forwards;
}

/*搜索框渐变*/
@keyframes color_turn2 {
  from {
    background-color: rgba(255, 255, 255, 0.8);
    color: black;
  }

  to {
    background-color: rgba(255, 255, 255, 1.0);
    color: black;
  }
}

.change_color2 {
  animation: color_turn2 500ms ease 1 forwards;
}

/* 左上角logo微调 */
.tlCorner {
  opacity: 95%;
  height: 100px;
}

/* 搜索栏 */
.searchBar {
  position: absolute;
  top: 26px;
  left: 30vw;
}

#searchInput {
  width: 408px;
  height: 28px;
  margin: 0 auto;
  border-radius: 40px;
  border: none;
  padding-left: 10px;
}

#searchSubmit {
  height: 27px;
  width: 27px;
  margin: 0 auto;
  background-image: url('../assets/img/searchIcon.png');
  background-repeat: no-repeat;
  background-size: contain;
  border: none;
  background-color: transparent;
  position: relative;
  top: -26px;
  left: 235px;
}

#auto {
  background-color: rgba(255, 255, 255, 1);
  font-size: 14px;
  margin-top: -10px;
}

.auto_out {
  padding-left: 6px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-family: cm;
  border-bottom: 2px solid gray;
}

.auto_out:hover {
  background-color: rgb(162, 162, 162);
  cursor: pointer;
}
</style>